/* global window */
import React, { Component } from 'react';
import { render } from 'react-dom';
import { StaticMap } from 'react-map-gl';
import { AmbientLight, PointLight, LightingEffect } from '@deck.gl/core';
import DeckGL from '@deck.gl/react';
import { PolygonLayer } from '@deck.gl/layers';
import { TripsLayer } from '@deck.gl/geo-layers';
import { ScatterplotLayer } from '@deck.gl/layers';
import axios from 'axios';
// Set your mapbox token here
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

// Source data CSV
const DATA_URL = {
  BUILDINGS: './buildings.json', // eslint-disable-line
  TRIPS: 'http://127.0.0.1:3333/tripv7', // eslint-disable-line
  SCATTER: './bart-stations.json', // eslint-disable-line
};

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0,
});

const pointLight = new PointLight({
  color: [0, 0, 0],
  intensity: 2.0,
  position: [-74.05, 40.7, 8000],
});

const lightingEffect = new LightingEffect({ ambientLight, pointLight });

const material = {
  ambient: 0.1,
  diffuse: 0.6,
  shininess: 32,
  specularColor: [60, 64, 70],
};

const DEFAULT_THEME = {
  buildingColor: [74, 80, 87],
  trailColor0: [253, 128, 93],
  trailColor1: [23, 184, 190],
  material,
  effects: [lightingEffect],
};

const INITIAL_VIEW_STATE = {
  longitude: -122.4,
  latitude: 37.78,
  zoom: 13,
  pitch: 45,
  bearing: 0,
};

const landCover = [
  [
    [-74.0, 40.7],
    [-74.02, 40.7],
    [-74.02, 40.72],
    [-74.0, 40.72],
  ],
];

export default class Deck extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0,
      trips: [],
    };
  }

  componentDidMount() {
    // const that=this;
    const fetchData = async () => {
      const response = await axios
        .get('http://127.0.0.1:3333/tripv7')
        .then(function(response) {
          console.log(response);
          console.log('nei:');
          return  response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      // await fetch(
      //   // 'http://localhost:3333/line',
      //   "http://127.0.0.1:3333/tripv7",
      // );
      const adddata =  response;
      console.log('wai:');
      console.log(adddata);
      this.setState({
        trips: adddata
      });
      // this.state.trips=adddata;
  }
  fetchData();
  console.log('wai');
  console.log(this.state.trips);
  this._animate();
}

  componentWillUnmount() {
    if (this._animationFrame) {
      window.cancelAnimationFrame(this._animationFrame);
    }
  }

  _animate() {
    const {
      loopLength = 1800, // unit corresponds to the timestamp in source data
      animationSpeed = 30, // unit time per second
    } = this.props;
    const timestamp = Date.now() / 1000;
    const loopTime = loopLength / animationSpeed;

    this.setState({
      time: ((timestamp % loopTime) / loopTime) * loopLength,
    });
    this._animationFrame = window.requestAnimationFrame(
      this._animate.bind(this),
    );
  }

  _renderLayers() {
    const {
      buildings = DATA_URL.BUILDINGS,
      trips = DATA_URL.TRIPS,
      scatter = DATA_URL.SCATTER,
      trailLength = 180,
      theme = DEFAULT_THEME,
    } = this.props;

    return [
      // This is only needed when using shadow effects
      new ScatterplotLayer({
        id: 'bart-stations',
        data: scatter,
        getRadius: d => Math.sqrt(d.entries),
        getPosition: d => d.coordinates,
        getColor: theme.trailColor0,
      }),
      new PolygonLayer({
        id: 'ground',
        data: landCover,
        getPolygon: f => f,
        stroked: false,
        getFillColor: theme.buildingColor,
      }),
      new TripsLayer({
        id: 'trips',
        data: this.state.trips,
        getPath: d => d.path,
        getTimestamps: d => d.timestamps,
        getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
        opacity: 0.3,
        widthMinPixels: 2,
        rounded: true,
        trailLength,
        currentTime: this.state.time,
        loadOptions: '',
        shadowEnabled: false,
      }),
      new PolygonLayer({
        id: 'buildings',
        data: buildings,
        extruded: true,
        wireframe: false,
        opacity: 0.5,
        getPolygon: f => f.polygon,
        getElevation: f => f.height,
        getFillColor: theme.buildingColor,
        material: theme.material,
      }),
    ];
  }

  render() {
    const {
      viewState,
      mapStyle = 'mapbox://styles/mapbox/dark-v9',
      theme = DEFAULT_THEME,
    } = this.props;

    return (
      <DeckGL
        layers={this._renderLayers()}
        effects={theme.effects}
        initialViewState={INITIAL_VIEW_STATE}
        viewState={viewState}
        controller={true}
      >
        <StaticMap
          reuseMaps
          mapStyle={mapStyle}
          preventStyleDiffing={true}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </DeckGL>
    );
  }
}
